<!--
 * @Description:浏览器滑动效果
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-21 11:20:55
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>浏览器滑动效果</title>
	<style>
		* {
			margin: 0;
			padding: 0
		}

		ul,
		ol {
			list-style-type: none;
		}

		html,
		body {
			width: 100%;
			height: 100%;
		}

		#ul,
		ul li {
			width: 100%;
			height: 100%;
		}

		#ol {
			position: fixed;
			top: 0;
			left: 100px;
		}

		ol li {
			width: 50px;
			border: 1px solid black;
			margin-bottom: 2px;
			text-align: center;
			line-height: 50px;
			cursor: pointer;
		}
	</style>
</head>

<body>
	<ul id="ul">
		<li>首页</li>
		<li>关注</li>
		<li>动态</li>
		<li>风格</li>
		<li>作品</li>
	</ul>
	<ol id="ol">
		<li>首页</li>
		<li>关注</li>
		<li>动态</li>
		<li>风格</li>
		<li>作品</li>
	</ol>

	<script>
		function $(id) {
			return document.getElementById(id);
		}

		function show(obj) {
			return obj.style.display = "block"
		}

		function hide(obj) {
			return obj.style.display = "none"
		}

		function scroll() {
			if (window.pageYOffset != null) { //ie9+
				return {
					left: window.pageXOffset,
					top: window.pageYOffset
				}
			} else if (document.compatMode == "CSS1Compat") { //不是怪异模式浏览器 <!DOCTYPE html>
				return {
					left: document.documentElement.scrollLeft,
					top: document.documentElement.scrollTop
				}
			} else { //怪异模式浏览器
				return {
					left: document.body.scrollLeft,
					top: document.body.scrollTop
				}
			}
		}

		window.onload = function () {
			var ulBox = $("ul")
			var ulBoxLi = ulBox.children;
			var olBox = $("ol")
			var olBoxLi = olBox.children;
			var leader = 0, //起事位置
				target = 0, //目标位置
				timer = null;
			var bgColor = ["pink", "purple", "orange", "blue", "green"]
			for (let index = 0; index < ulBoxLi.length; index++) {
					const element = ulBoxLi[index];
					element.style.backgroundColor = bgColor[index]
					olBoxLi[index].style.backgroundColor = bgColor[index]
					olBoxLi[index].onclick = function () {
						clearInterval(timer)
						target=element.offsetTop
						console.log("sss",target)
						timer = setInterval(() => {
							leader = leader + (target - leader) / 10 //位置
							window.scrollTo(0, leader)
						}, 30)
					}
			}



			// var gotop = $("gotop")
			// window.onscroll = function () { 
			// 	scroll().top > 0 ? show(gotop) : hide(gotop)
			// 	leader = scroll().top
			// }
			// var leader = 0,//起事位置
			// 	target = 0,//目标位置
			// 	timer = null;
			// gotop.onclick = function () {
			// 	target = 0;//点击完毕 奔向0
			// 	timer = setInterval(() => {
			// 		leader = leader + (target - leader) / 10位置
			// 		window.scrollTo(0, leader)
			// 		if (leader == target) {
			// 			clearInterval(timer)
			// 		} else {

			// 		}

			// 	}, 30)
			// }

		}
	</script>

</body>

</html>